<template>
  <!--告警管理.--->
<div class="alarm" :style="height">
  <!--告警管理内容--->
  <div class="alarm_box">
    <!--告警管理头部标题 --->
    <div class="header_alarm">
      <div class="alarm_header_return">
        <a href="#/home"> <van-icon name="arrow-left" color="#333333"  size="20"/></a>
      </div>
      <div class="alarm_header_text">报警管理</div>
      <div class="alarm_header_return"></div>
    </div>
    <!--告警管理处理 --->
    <div class="alarm_handle_box">
      <!-- 处理按钮样式-->
      <div class="alarm_handle">
        <div class="alarm_handle_item"
             v-for="(item,index) in handle_text"
             :key="index"
        >
          <input
              type="radio"
              name="test"
              @click="test(index)"
              :value="index"
              v-model="checkedValue"
          >
          <p>{{item}}</p>
        </div>
      </div>
      <!-- 显示内容-->
      <div class="handle_content" v-if="checkedValue==0">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="test"
        >
          <div class="nomal_handle_content" v-for="(item,index) in alarm_true_list" :key="index" >
            <div class="nomal_handle_header" v-if="item.alarmLevel==0">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==126">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status">
                严重告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==127">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status">
                主要告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==128">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status">
                次要告警
              </div>
            </div>
            <div class="nomal_handle_text">
              <div class="nomal_handle_lists">
                <div class="nomal_handle_list">
                  <p>机房名称：</p>
                  <p>{{item.roomName}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>报警时间：</p>
                  <p>{{item.createDate}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>设备名称：</p>
                  <p>{{item.deviceName}}</p>
                </div>
              </div>
              <div class="nomal_handle_status"  v-if="item.state==0" >
                未处理
              </div>
              <div class="nomal_handle_status"
                   :class="[item.state==1?'nomal_handle_status_active':null]"
                   v-else
              >
                已处理
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="handle_content" v-if="checkedValue==1">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="test"
        >
          <div class="nomal_handle_content" v-for="(item,index) in alarm_false_list" :key="index" >
            <div class="nomal_handle_header" v-if="item.alarmLevel==0">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==126">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                严重告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==127">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                主要告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==128">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                次要告警
              </div>
            </div>
            <div class="nomal_handle_text">
              <div class="nomal_handle_lists">
                <div class="nomal_handle_list">
                  <p>机房名称：</p>
                  <p>{{item.roomName}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>报警时间：</p>
                  <p>{{item.createDate}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>设备名称：</p>
                  <p>{{item.deviceName}}</p>
                </div>
              </div>
              <div class="nomal_handle_status"  v-if="item.state==0"  @click="no_handle(item.id)">
                未处理
              </div>
              <div class="nomal_handle_status" :class="[item.state==1?'nomal_handle_status_active':null]" v-else>
                已处理
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="handle_content" v-if="checkedValue==2">
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="test"
        >
          <div class="nomal_handle_content" v-for="(item,index) in alarm_list" :key="index">
            <div class="nomal_handle_header" v-if="item.alarmLevel==0">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==126">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                严重告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==127">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                主要告警
              </div>
            </div>
            <div class="nomal_handle_header" v-if="item.alarmLevel==128">
              <div class="nomal_handle_header_name">
                {{index+1}}、设备报警—
              </div>
              <div class="nomal_handle_header_status" :class="[item.state==0?'nomal_handle_header_status_active':null]">
                次要告警
              </div>
            </div>
            <div class="nomal_handle_text">
              <div class="nomal_handle_lists">
                <div class="nomal_handle_list">
                  <p>机房名称：</p>
                  <p>{{item.roomName}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>报警时间：</p>
                  <p>{{item.createDate}}</p>
                </div>
                <div class="nomal_handle_list">
                  <p>设备名称：</p>
                  <p>{{item.deviceName}}</p>
                </div>
              </div>
              <div class="nomal_handle_status"  v-if="item.state==0"  @click="no_handle(item.id)">
                未处理
              </div>
              <div class="nomal_handle_status" :class="[item.state==1?'nomal_handle_status_active':null]" v-else>
                已处理
              </div>
            </div>
          </div>
        </van-list>

      </div>
    </div>
    <!--点击未处理弹窗表单-->
    <div class="alarm_form" v-if="alarm_form_status">
      <van-popup v-model="alarm_form_status">
        <van-form @submit="onSubmit">
          <p>报警内容</p>
          <van-field
              v-model="alarm_contents"
              name="alarm_content"
              rows="1"
              autosize
              label="报警内容"
              type="textarea"
              placeholder="报警内容"
              disabled
              class="alarm_content"
          />
          <van-field
              v-model="maintainer"
              type="text"
              name="maintainer"
              label="维保人"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写维保人' }]"
          />
          <van-field
              v-model="maintenancecontent"
              rows="1"
              name="maintenancecontent"
              autosize
              label="维保内容"
              type="textarea"
              placeholder="请输入"
              :rules="[{ required: true, message: '请填写维保内容' }]"
          />
          <div class="buttom_alarm">
            <van-button round block type="info" native-type="submit" @click="closeform" class="false_alarm">
              取消
            </van-button>
            <van-button round block type="info" native-type="submit" class="true_alarm">
              确定
            </van-button>
          </div>
        </van-form>
      </van-popup>
    </div>
  </div>
  <!--tabbar--->
  <tabbar :active="1"></tabbar>
</div>
</template>
<script>
import tabbar from "../comment/tabbar";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
        radio:true,// 单选框状态
        checkedValue:2,//被选中的值
        handle_text:['已处理','未处理'],//单选框文字
        height:"",
        //报警列表
        alarm_list:[
          // {
          //   "hostName": "办公室测试", //机构名称
          //   "alarmLevel": 126, //告警级别：126是严重告警；127是主要告警；次要告警128
          //   "id": 0, //
          //   "state": 0, //处理和未处理状态
          //   "deviceName": "红外人体探测", //设备名称
          //   "content": "办公室-办公室测试-红外人体探测-告警", //报警内容
          //   "roomName": "办公室", //机房名称
          //   "createDate": "2020-09-17 17:01:08" //报警时间
          // },
          // {
          //   "hostName": "办公室测试1",
          //   "alarmLevel": 127,
          //   "id": 1,
          //   "state": 1,
          //   "deviceName": "红外人体探测",
          //   "content": "办公室-办公室测试-红外人体探测-告警111",
          //   "roomName": "办公室1",
          //   "createDate": "2020-09-17 17:01:02"
          // },
          // {
          //   "hostName": "办公室测试2",
          //   "alarmLevel": 128,
          //   "id": 2,
          //   "state": 1,
          //   "deviceName": "红外人体探测",
          //   "content": "办公室-办公室测试-红外人体探测-告警222",
          //   "roomName": "办公室2",
          //   "createDate": "2020-09-17 17:00:54"
          // },
          // {
          //   "hostName": "办公室测试3",
          //   "alarmLevel": 126,
          //   "id": 3,
          //   "state": 0,
          //   "deviceName": "红外人体探测",
          //   "content": "办公室-办公室测试-红外人体探测-告警333",
          //   "roomName": "办公室3",
          //   "createDate": "2020-09-17 17:00:48"
          // },
          // {
          //   "hostName": "办公室测试4",
          //   "alarmLevel": 126,
          //   "id": 4,
          //   "state": 0,
          //   "deviceName": "红外人体探测",
          //   "content": "办公室-办公室测试-红外人体探测-告警333",
          //   "roomName": "办公室4",
          //   "createDate": "2020-09-17 17:00:48"
          // }
        ],
        //已处理列表
        alarm_true_list:[],
        //未处理列表
        alarm_false_list:[],
        //表单显示状态
        alarm_form_status:false,
        //报警内容
        alarm_content:{},
        //显示报警内容
        alarm_contents:'',
        //维保人
        maintainer: '',
        //维保内容
        maintenancecontent:'',
        //加载状态
        loading: false,
        //没有更多加载了，结束加载
        finished: false,
        //数据总长度
        total:'',
        //默认数据长度
        count:3
    }
  },
  created() {
    //设置页面和设备高度一致
    this.height=`height:${document.documentElement.clientHeight}px`
    //加载获取告警信息列表的方法
    this.get_test_cgi();
    //加载当checkvalue值是1时加载的方法
    this.changecheckvalue();
    // 接收路由参数status，0：现实未处理告警列表；1：现实已处理列表
    if (this.$route.params.status != null && this.$route.params.status == 0) {
      // 未处理
      this.checkedValue = 1;
      // TODO: 刷新未处理列表

    } else if (this.$route.params.status != null && this.$route.params.status == 1) {
      // 已处理
      this.checkedValue = 0;
      // TODO: 刷新已处理列表

    }
  },
  methods:{
    //点击单选框触发的事件
    test(index){
      // this.$data.checkedValue=index;
      console.log(this.$data.checkedValue)
      this.alarm_true_list=[]
      this.alarm_false_list=[]
      if(index==0){
        this.$data.checkedValue=index;
        console.log("000")
        // this.get_test_cgi();
        let alarm_list=this.$data.alarm_list
        console.log(alarm_list)
        for(let i in alarm_list){
          if(alarm_list[i].state==1){
            this.$data.alarm_true_list.push(alarm_list[i])
          }else if(alarm_list[i].state==0){
            this.$data.alarm_false_list.push(alarm_list[i])
          }
        }
      }else if(index==1){
        this.$data.checkedValue=index;
        console.log("111");
        // this.get_test_cgi();
        let alarm_list=this.$data.alarm_list
        console.log(alarm_list)
        for(let i in alarm_list){
          if(alarm_list[i].state==0){
            this.$data.alarm_false_list.push(alarm_list[i])
          }else if(alarm_list[i].state==1){
            this.$data.alarm_true_list.push(alarm_list[i])
          }
        }
      }
    },
    //点击未处理方法触发的事件
    no_handle(id){
      console.log(id)
      let alarm_list=this.$data.alarm_list
      for(let i in alarm_list){
        if(alarm_list[i].id==id){
            this.$data.alarm_content=alarm_list[i]
            this.$data.alarm_contents=alarm_list[i].createDate+'\r\n'+alarm_list[i].content
        }
      }
      this.$data.alarm_form_status=true;
    },
    //点击取消触发的事件
    closeform(){
      this.$data.alarm_form_status=false;
      this.clear();
    },
    //清空表单方法
    clear(){
          this.$data.maintainer='',
          this.$data.maintenancecontent=''
    },
    //保存方法
    onSubmit(values) {
      console.log(this.$data.alarm_content,values);
          var self=this
          self.$axios.post('/android/alarmHanding',{
            alarmId:self.$data.alarm_content.id.toString(),
            maintainer:values.maintainer,
            content:values.maintenancecontent
          }).then(function(e) {
            console.log(e.data.operation)
            if(e.data.operation == "操作成功"){
              console.log(self.checkedValue)
              // self.changecheckvalue();
              alert("操作成功")
              self.closeform();
              self.$router.go(0);
              // self.get_test_cgi();
              // self.changecheckvalue();
              // self.test();
            }
          })
        this.clear();
      // for (let i in alarm_list){
      //   if(alarm_list[i].id==this.$data.alarm_content.id){
      //     var self=this
      //     self.$axios.post('/android/alarmHanding',{
      //       alarmId:self.$data.alarm_content.id.toString(),
      //       maintainer:values.maintainer,
      //       content:values.maintenancecontent
      //     }).then(function(e) {
      //       console.log(e.data.operation)
      //       if(e.data.operation == "操作成功"){
      //         alert("操作成功")
      //         self.closeform();
      //         self.get_test_cgi();
      //         self.test();
      //       }
      //     })
      //   }
      // }
    },
    //获取报警信息
    get_test_cgi(){
      var self=this
      let user=JSON.parse(localStorage.getItem("users"));
      self.$axios.post('/android/alarmManage',{
        userId:user.id.toString(),
        from:'0',
        size:'100'
      }).then(function(e) {
        let result=e.data.alarmList;
        // self.$data.alarm_list=result;
        if(result.length>self.count){
          self.$data.alarm_list=result;
          console.log( self.$data.alarm_list)
          self.loading=false;
          self.finished=true;
        }else if(result.length<=self.count){
          self.$data.alarm_list=result;
          console.log( self.$data.alarm_list)
          self.finished=true;
        }
      })
    },
    //当checkvalue值是1时加载的方法
    changecheckvalue(){
      if(this.$data.checkedValue==1){
        console.log("123")
        this.alarm_true_list=[]
        this.alarm_false_list=[]
        var self=this
        self.$axios.post('/android/alarmManage',{
          userId:'1',
          from:'0',
          size:'18'
        }).then(function(e) {
          let result=e.data.alarmList;
          for(let i in result){
            //console.log(result[i].id == self.alarm_content.id)
            //console.log(result[i].id)
            if(result[i].id == self.alarm_content.id){
              console.log("id相等")
              console.log(result[i].state==1)
              if(result[i].state==1){
                console.log("state=1")
                self.alarm_true_list.push(result[i])
              }
            }
          }
        })

      }
    }
  }
}
</script>
<style >
.alarm_content textarea:disabled{
  color: #333333;
}
 .alarm_content span{
  color: #646566!important;
}
.alarm{
  width: 100vw;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}
.alarm_box{
  flex: 1;
  overflow-y: auto;
}
.tabbar{
  height:14.4vw;
}
.false_alarm{
  width:21.333vw;
  height:9.333vw;
  border-radius: 2.667vw;
  border: 0.133vw #c5cfd6 solid;
  background: none;
  color: #333333;
  font-size: 3.733vw;
}
.true_alarm{
  margin-left:9.333vw;
  background: #0195ff;
  color: #ffffff;
  width:21.333vw;
  height:9.333vw;
  border-radius: 2.667vw;
  border: 0.133vw #c5cfd6 solid;
  font-size: 3.733vw;
}
.buttom_alarm{
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content:center;
  align-items: center;
  margin:6.8vw 0 8vw 0;
}
.van-form {
  width: 90%;
  background: #ffffff;
  margin: 0 auto;
}
.van-form p{
  text-align: center;
  font-size:4.267vw;
  color: #333333;
  margin: 6.667vw 0 2.667vw 0;
}
/*.van-field{*/
/*  width: 91%!important;*/
/*  border-bottom: 1px #ddd solid;*/
/*  margin: 0 auto;*/
/*  color: #999999;*/
/*  font-size:3.733vw!important;*/
/*}*/
/*.van-field__label{*/
/*  color: #999999;*/
/*  font-size:3.733vw!important;*/
/*}*/
/*.van-field__body{*/
/*  width: 100%;*/
/*}*/
.van-field__body input::-webkit-input-placeholder{
  color:#cccccc;
}
.van-field__body textarea::-webkit-input-placeholder{
  color:#cccccc;
}
.van-field__body textarea{
  color: #333333;
  font-size:3.733vw;
}
.alarm_cover{
  width: 100vw;
  height: 100vw;
  background: #000000;
  opacity: 0.5;
  position:absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.van-popup{
  width:89.333vw;
  border-radius: 2.667vw;
}
.nomal_handle_status{
  width:16vw;
  height:8vw;
  border-radius:2.667vw;
  background: #0195ff;
  text-align: center;
  line-height: 8vw;
  font-size:3.733vw;
  color: #ffffff;
}
.nomal_handle_status_active{
  width:16vw;
  height:8vw;
  border-radius:2.667vw;
  background: #a3aeb5;
  text-align: center;
  line-height: 8vw;
  font-size:3.733vw;
  color: #ffffff;
}
.nomal_handle_header_status_active{
  color:#ff2a2a;
}
.nomal_handle_lists{
  width: 100vw;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
}
.nomal_handle_list{
  flex: 1;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  color: #bcbcbc;
  font-size:3.2vw;
  margin-bottom:2.4vw;
}
.nomal_handle_text{
  width: 100vw;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  padding: 3.867vw 5.333vw 0 5.333vw;
  box-sizing: border-box;
}
.nomal_handle_header{
  width: 100vw;
  border-bottom:0.133vw #c5cfd6 solid;;
  padding: 4vw 5.333vw;
  box-sizing: border-box;
  display: flex;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  color: #333333;
  font-size:3.733vw;
}
.nomal_handle_content{
  width: 100vw;
  background: #ffffff;
  border-bottom: 1.333vw #f5f8fa solid;
}
.alarm_handle_box{
  width: 100vw;
}
.alarm_handle{
  width: 100vw;
  padding: 4.133vw 5.2vw;
  box-sizing: border-box;
  display: flex;
  flex-flow: row;
  justify-content:flex-end;
  background: #f5f8fa;
}
.alarm_handle_item{
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  margin-left:8.133vw;
}

.alarm_handle_item input {
  width: 4vw;
  height:4vw;
  border: 0.133vw #c5cfd6 solid;
  border-radius: 50vw;
  color: #ffffff;
}
.alarm_handle_item input:checked{
  /*content:"";*/
  /*display: inline-block;*/
  /*width:15px;*/
  /*height:15px;*/
  background:#0195ff;
  /*border-radius:50%;*/
}
.alarm_handle_item  p{
  font-size:3.733vw;
  color: #333333;
  margin-left:2.267vw;
}
.alarm_header_text{
   color:#333333;
   font-size: 4.8vw;
}
/**告警管理头部标题大盒子***/
.header_alarm{
  width: 100vw;
  height: 11.733vw;
  padding: 3.6vw 5.333vw;
  box-sizing: border-box;
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  background: #f2f2f2;
}
/** 返回按钮 盒子***/
.alarm_header_return a{
  width:2.667vw;
  height: 4.267vw;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
*{
  padding: 0;
  margin: 0;
}
</style>
